<template>
  <div class="process-manager">
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="openDialog">上传流程</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="processList">
      <el-table-column label="流程Key" prop="processKey"></el-table-column>
      <el-table-column label="流程名称" prop="processName"></el-table-column>
      <el-table-column label="最新版本号" prop="lastVersion"></el-table-column>
      <el-table-column label="最后发布时间" prop="lastDeployTime"></el-table-column>
      <el-table-column label="运行中实例数" prop="activeInstances"></el-table-column>
      <el-table-column label="已完成实例数" prop="completedInstances"></el-table-column>
      <el-table-column label="总创建实例数" prop="totalInstances"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <upload-process-dialog v-model="dialogVisible" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import UploadProcessDialog from './dialog/uploadProcessDialog.vue';
import { getProcessConfigList } from "@/api/workflow/processManager";
import { ElMessage, ElMessageBox } from 'element-plus';
import {useRouter} from "vue-router";

const router = useRouter();
const dialogVisible = ref(false);
const loading = ref(false);
const processList = ref([]);

// 打开上传对话框
const openDialog = () => {
  dialogVisible.value = true;
};

// 获取流程列表
const getProcessList = async () => {
  try {
    loading.value = true;
    const res = await getProcessConfigList();
    if (res.code === 200) {
      processList.value = res.data;
    }
  } catch (error) {
    console.error('获取流程列表失败:', error);
    ElMessage.error('获取流程列表失败');
  } finally {
    loading.value = false;
  }
};

// 编辑流程
const handleEdit = (row) => {
  const query = {
    processId: row.processId
  };
  console.log('编辑流程:', query);
  router.push({ path: 'processDetailInfo', query });
};

// 删除流程
const handleDelete = (row) => {
  ElMessageBox.confirm('确认要删除该流程吗？', '警告', {
    type: 'warning'
  }).then(() => {
    // TODO: 实现删除功能
    console.log('删除流程:', row);
  }).catch(() => {});
};

// 组件挂载时获取流程列表
onMounted(() => {
  getProcessList();
});
</script>

<style scoped>
.process-manager {
  padding: 20px;
}
</style>
